<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="/assets/lib/layui/css/layui.css" />
		<link rel="stylesheet" href="/assets/css/article/art_cate.css" />
	</head>
	<body>
		<!-- 卡片区域 -->
		<div class="layui-card">
			<div class="layui-card-header">
				<span>文章类别管理</span>
				<button
					type="button"
					class="layui-btn layui-btn-normal layui-btn-sm"
					id="btnAddCate"
				>
					添加类别
				</button>
			</div>
			<div class="layui-card-body">
				<table class="layui-table">
					<colgroup>
						<col />
						<col />
						<col width="200" />
					</colgroup>
					<thead>
						<tr>
							<th>分类名称</th>
							<th>分类别名</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>

		<!-- 表格数据的模板 -->
		<script type="text/html" id="tpl-table">
			{{each data}}
			<tr>
				<td>{{$value.name}}</td>
				<td>{{$value.alias}}</td>
				<td>
					<button
						type="button"
						class="layui-btn layui-btn-xs btn-edit"
						data-id="{{$value.id}}"
					>
						编辑
					</button>
					<button
						type="button"
						class="layui-btn layui-btn-danger layui-btn-xs btn-delete"
						data-id="{{$value.id}}"
					>
						删除
					</button>
				</td>
			</tr>
			{{/each}}
		</script>

		<!-- 添加分类的弹出层 -->
		<script type="text/html" id="dialog-add">
			<form class="layui-form" id="form-add">
				<div class="layui-form-item">
					<label class="layui-form-label">分类名称</label>
					<div class="layui-input-block">
						<input
							type="text"
							name="name"
							required
							lay-verify="required"
							placeholder="请输入分类名称"
							autocomplete="off"
							class="layui-input"
						/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">分类别名</label>
					<div class="layui-input-block">
						<input
							type="text"
							name="alias"
							required
							lay-verify="required"
							placeholder="请输入分类别名"
							autocomplete="off"
							class="layui-input"
						/>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button
							class="layui-btn"
							lay-submit
							lay-filter="formDemo"
						>
							确认添加
						</button>
						<button
							type="reset"
							class="layui-btn layui-btn-primary"
						>
							重置
						</button>
					</div>
				</div>
			</form>
		</script>

		<!-- 修改分类的弹出层 -->
		<script type="text/html" id="dialog-edit">
			<form class="layui-form" id="form-edit" lay-filter="form-edit">
				<!-- 隐藏域，保存 id 的值 -->
				<input type="hidden" name="id" />
				<div class="layui-form-item">
					<label class="layui-form-label">分类名称</label>
					<div class="layui-input-block">
						<input
							type="text"
							name="name"
							required
							lay-verify="required"
							placeholder="请输入分类名称"
							autocomplete="off"
							class="layui-input"
						/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">分类别名</label>
					<div class="layui-input-block">
						<input
							type="text"
							name="alias"
							required
							lay-verify="required"
							placeholder="请输入分类别名"
							autocomplete="off"
							class="layui-input"
						/>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button
							class="layui-btn"
							lay-submit
							lay-filter="formDemo"
						>
							确认修改
						</button>
					</div>
				</div>
			</form>
		</script>

		<!-- 导入 layui 的js -->
		<script src="/assets/lib/layui/layui.all.js"></script>
		<!-- 导入 jQuery -->
		<script src="/assets/lib/jquery.js"></script>
		<!-- 导入 baseAPI -->
		<script src="/assets/js/baseAPI.js"></script>
		<!-- 导入模板引擎 -->
		<script src="/assets/lib/template-web.js"></script>
		<!-- 导入自己的 js -->
		<script src="/assets/js/article/art_cate.js"></script>
	</body>
</html>
